<template>
  <div ref="chart" :style="{ width: width, height: height }"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "ChartBar",
  props: {
    data: {
      // 数据
      type: Array,
      required: true,
    },
    xAxisData: {
      // x轴
      type: Array,
      required: true,
    },
    legendData: {
      type: Array,
      required: true,
    },
    width: {
      // 宽高
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  mounted() {
    // const myChart = echarts.init(document.getElementById("chart"));
    // const option = {

    //   series: this.data.map((item) => ({
    //     type: "bar3D",
    //     name: item.name,
    //     data: item.data.map((value, index) => [index, item.name, value]),
    //     shading: "lambert",
    //     label: {
    //       show: true,
    //       formatter: "{b}",
    //       position: "insideTop",
    //       offset: [0, -10],
    //       textStyle: {
    //         color: "#000",
    //         fontSize: "14",
    //       },
    //     },
    //     itemStyle: {
    //       color: item.color,
    //     },
    //   })),
    // };
    // myChart.setOption(option);
    this.renderChart();
  },
  data() {
    return {
      xData: ["04-08", "04-09", "04-10", "04-11", "04-12"],
      line: ["375", "500", "900", "800", "610"],
      line_bg: ["1500", "1500", "1500", "1500", "1500"],
      paperDataURI:
        "",
      paperBlue:
        "",
      aa: [
        {
          name: "柱状图1",
          color: "#FF6B6B",
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
        {
          name: "柱状图2",
          color: "#67C23A",
          data: [210, 432, 301, 234, 790, 930, 820],
        },
      ],
    };
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const { data, xAxisData, legendData } = this; // 根据具体数据格式再处理

      const option = {
        title: {
          text: "(万次)",
          textStyle: {
            fontSize: 12,
            color: "#666",
            fontWeight: "400",
          },
          top: 0,
          left: "0%",
        },
        tooltip: {
          formatter: function (data) {
            let aaa = data.name + ":" + data.value + "万次";
            return aaa;
          },
        },

        grid: {
          left: "4%",
          right: "1%",
          top: "11%",
          bottom: "50px",
        },
        legend: {
          show: true,
          icon: "circle",
          orient: "horizontal",
          top: "90.5%",
          right: "center",
          itemWidth: 16.5,
          itemHeight: 6,
          // itemGap: 30,
          textStyle: {
            // color: '#FFFFFF'
            color: "#C9C8CD",
            fontSize: 14,
          },
        },
        xAxis: [
          {
            data: this.xData,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666",
                fontSize: 12,
              },
              margin: 30, //刻度标签与轴线之间的距离。
            },

            axisLine: {
              show: false, //不显示x轴
            },
            axisTick: {
              show: false, //不显示刻度
            },
            boundaryGap: true,
            splitLine: {
              show: false,
              width: 0.08,
              lineStyle: {
                type: "solid",
                color: "#dfdfdf",
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#dfdfdf",
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#dfdfdf",
                type: "solid",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#666",
              },
            },
          },
        ],
        series: [
          {
            // 柱底最底下的圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [32, 18], // 调整大小，从而形成各种视图效果
            symbolOffset: [0, 5], // 来调整其于基准柱的相对位置
            z: 12,
            itemStyle: {
              normal: {
                color: "#4898FF",
              },
            },
            data: this.line_bg,
          },
          // 背景柱体
          {
            name: "",
            type: "bar",
            barWidth: 32,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "#4898FF",
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: "#EFF0FA",
            },
            data: this.line,
          },

          // 背景柱顶圆片
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [32, 18], //调整截面形状
            symbolOffset: [0, 0],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: "green",
              },
            },
            data: this.line_bg,
          },

          // 数值柱顶圆片
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [32, 18], //调整截面形状
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: "red",
              },
            },
            data: this.line,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
  watch: {
    // data: {
    //   handler() {
    //     this.renderChart();
    //   },
    //   deep: true,
    // },
    // xAxisData: {
    //   handler() {
    //     this.renderChart();
    //   },
    //   deep: true,
    // },
    // legendData: {
    //   handler() {
    //     this.renderChart();
    //   },
    //   deep: true,
    // },
  },
};
</script>

<style scoped>
</style>
